<template>
  <div :class="$style.wrapper">
    <div :class="$style.mapWrapper">
      <div :class="$style.map" id="map"></div>
    </div>
    <div :class="$style.statePreview">
      <div :class="$style.viewItem">
        <ps-state-overview></ps-state-overview>
      </div>
    </div>
  </div>
</template>
<script>
import PsStateOverview from './../../../default/components/area-state/PsStateOverview.vue';
import { mapGetters } from 'vuex';
import mapFactory from './../../../common/js/map-factory.js';

export default {
  name: 'PsGlobal',
  components: {
    PsStateOverview
  },
  data () {
    return {
      viewId: null
    };
  },
  computed: {
    ...mapGetters('resource', [
      'currentResource'
    ])
  },
  mounted () {
    const _this = this;
    mapFactory.getBMap().then(BMap => {
      const map = new BMap.Map('map');
      map.centerAndZoom(new BMap.Point(104.4035, 37.915), 5);
      this.currentResource.children.forEach(domain => {
        const point = new BMap.Point(domain.values.longitude, domain.values.latitude);
        const label = new BMap.Label(domain.label, { offset: new BMap.Size(0, -20) });
        if (domain.label === '上海宝山') {
          label.setOffset(new BMap.Size(-55, 0));
        }
        if (domain.label === '宝武炭材') {
          label.setOffset(new BMap.Size(20, 0));
        }
        const marker = new BMap.Marker(point);
        marker.disableDragging();
        marker.setLabel(label);
        marker.addEventListener('click', function (e) {
          let routerParam = _this.$router.currentRoute.params;
          routerParam.resourceId = domain.id;
          _this.$router.push({
            name: _this.$route.name,
            params: routerParam
          });
        });
        map.addOverlay(marker);
      });
    });
  }
};
</script>
<style lang="scss" module>
@import './../../../style/default/ps-global.scss';
</style>
